<template>
  <el-scrollbar class="quater_one">
    <ListItem :itemData="quterData" activeName="1" />
    <Empty v-if="quterData.length == 0">
      <slot>暂无数据</slot>
    </Empty>

    <div class="board_list" v-if="suggestList.length">
      <div class="board_list_title">问题建议</div>
      <div>
        <div class="img_box_suggest" v-for="(item, index) in suggestList" :key="index">
          <p class="board_list_suggest" v-html="item.proCon || '未填写'"></p>
          <div class="file_box_suggest" v-if="item.proFileList.length">
            <UploadPreview :file-fist="item.proFileList" layout="list"></UploadPreview>
          </div>
        </div>
      </div>
    </div>

    <div class="board_list" v-if="albumList.length">
      <div class="board_list_title">图片/视频/附件</div>
      <div class="img_box">
        <UploadPreview :fileList="albumList" layout="list"></UploadPreview>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import ListItem from './ListItem.vue'
import UploadPreview from '@com/UploadPreview/index.vue'
import { getScoreQuarterRecordForm, getScoreQuarterRecordFormNoLoading } from '@apis/evaluation.js'
export default {
  name: 'QuarterlySummary',
  components: { ListItem, UploadPreview },
  props: {
    activeUser: {
      type: Object,
      default: () => {
        return {}
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      quterData: [
        { titName: '季度个人总结', cont: '季度个人总结' },
        { titName: '教育培训记录', cont: '教育培训记录' },
        { titName: '奖惩情况', cont: '奖惩情况' },
      ],
      suggestList: [],
      albumList: [],
      routerQuery: {},
    }
  },
  computed: {},
  watch: {
    activeUser() {
      this.getDetail()
    },
  },
  created() {
    this.routerQuery = this.$route.query
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      if (!this.loading) {
        getScoreQuarterRecordForm({
          needId: this.routerQuery.needId,
          userId: this.activeUser.userId,
        }).then(res => {
          const data = res.data
          this.quterData = [
            { titName: '季度个人总结', cont: data.workCon },
            { titName: '教育培训记录', cont: data.eduCon },
            { titName: '奖惩情况', cont: data.rpCon },
          ]

          this.suggestList = data.proConList || []
          this.albumList = data.recordFileList
        })
      } else {
        getScoreQuarterRecordFormNoLoading({
          needId: this.routerQuery.needId,
          userId: this.activeUser.userId,
        }).then(res => {
          const data = res.data
          this.quterData = [
            { titName: '季度个人总结', cont: data.workCon },
            { titName: '教育培训记录', cont: data.eduCon },
            { titName: '奖惩情况', cont: data.rpCon },
          ]

          this.suggestList = data.proConList || []
          this.albumList = data.recordFileList
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.quater_one {
  margin-bottom: 20px;
  height: calc(100% - 50px);
}
.board_list {
  margin-top: 20px;
  .board_list_title {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 10px;
  }
  .img_box {
    padding: 15px;
    background-color: #e9eff48f;
    margin-bottom: 10px;
  }
  .board_list_sugge {
    color: #333333;
    font-size: 16px;
    line-height: 15px;
    padding: 10px 0;
    letter-spacing: 1px;
  }
  .img_box_suggest {
    padding: 10px;
    border: 1px solid #dddddd;
    &:not(:first-of-type) {
      border-top: 0;
    }
  }
  .board_list_suggest {
    padding: 15px;
    background-color: #e9eff48f;
    color: #333333;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 1px;
  }
  .file_box_suggest {
    margin-top: 10px;
  }
}
</style>
